import React, { Component } from "react";
// 路由
import { Route } from "react-router-dom"
// 导入new组件
import News from "../News";
import HouseList from "../HouseList"
import Index from '../Index'
import Profile from '../Profile'
// import Search from "../Search";
// 导入tabbal组件
import { TabBar } from 'antd-mobile';
// 引入css
import './index.scss'
// TabBar数据
const tabItems = [
    {
        title: '首页',
        icon: 'icon-cangku',
        path: '/home'
    },
    {
        title: '找房',
        icon: 'icon-integral',
        path: '/home/news'
    },
    {
        title: '资讯',
        icon: 'icon-store',
        path: '/home/list'
    },
    {
        title: '我的',
        icon: 'icon-bussiness-man',
        path: '/home/profile'
    }
]
/* 问题；点击导航菜单，导航到找房列表页面时，找房菜单没有高亮
原因：原来我们实现该功能时候，只考虑啦第一次加载或者点击home组件的情况，但是我们没有考虑不重新加载home组件时的路由切换
因为我们的代码没有覆盖到。
解决：思路在路由切换时执行菜单高亮的，的逻辑代码
1.添加componentDidupdate函索
2在函数中判断路由是否切换(通过props传递给组件的，所有对比前后props的地址)
3 在路由地址切换时让菜单高亮
*/

class Home extends Component {

    state = {
        selectedTab: this.props.location.pathname,
        selecte: false
    }
    // 生命周期函数
    componentDidUpdate(prevProps) {
        console.log('上一次的路由信息', prevProps)
        console.log('当前的路由信息', this.props)
        if (prevProps.location.pathname !== this.props.location.pathname) {
            // 此时路由发生切换啦
            this.setState({
                selectedTab: this.props.location.pathname
            })
        }

    }
    //渲染tabar.item
    renderTabItem() {
        // console.log("history", this.props.history)
        return tabItems.map((item) => {
            return (<TabBar.Item
                title={item.title}
                key={item.title}

                icon={
                    <i className={`iconfont ${item.icon}`} />
                }
                selectedIcon={
                    <i className={`iconfont ${item.icon}`} />
                }
                selected={this.state.selectedTab === item.path}
                onPress={() => {

                    this.setState({
                        selectedTab: item.path,
                        selecte: true
                    });
                    // 跳转路由
                    this.props.history.push(item.path)
                }}

            />)
        })
    }




    render() {

        return (
            <div className="home">

                {/* 渲染子路由 */}
                <Route path="/home/news" component={News}></Route>
                <Route exact path="/home" component={Index}></Route>
                <Route path='/home/list' component={HouseList}></Route>
                <Route path="/home/profile" component={Profile}></Route>
                {/* <Route path='/home/search' component={Search}></Route> */}
                {/* TaBar组件 */}

                <TabBar
                    noRenderContent={true}
                    tintColor="#33A3F4"
                    barTintColor="white"
                    tabBarPosition='bottom'
                >
                    {this.renderTabItem()}
                </TabBar>
            </div>
        )
    }
}

export default Home